React 透過組件來實現動態載入網頁
最常見的載入通常是網頁切換
可是有些時候雖然切換網頁
但兩個頁面上可能具有相同的東西
如果能夠做到選擇
那麼就能減少重新渲染的組件數量
也就能提升網站的效能
今天就要來學 Router 這個小東西啦~

Router

網站如若是單一頁面型（Single Page Application, SPA）網站
Router 的使用就會變得很重要
他主要是用來判定切換功能的時候
應該要載入哪些組件
首先我們需要安裝兩個東西
透過 CMD 在工作目錄下進行指令安裝：
npm install react-router --save
npm install react-router-dom --save
前者是主要的 Router
後者是我在執行 tutorial 範例程式的時候
錯誤訊息顯示缺少的模組
所以在這邊我就一併補上啦

安裝完成之後
就可以來試著使用 Router 來切換組件囉~
直接上程式碼：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function App() {
  return (
     <Router>
        <div>
           <h2>Welcome to React Router Tutorial</h2>
           <ul>
              <li><Link to="app">Home</Link></li>
              {/*<li><Link to={'/'}>Home</Link></li>*/}
              <li><Link to={'/Login'}>Login</Link></li>
           </ul>
           <hr />
           
           <Switch>
              <Route path="/app" component={Home} />
              {/*<Route exact path='/' component={Home} />*/}
              <Route exact path='/Login' component={Login} />
           </Switch>
        </div>
     </Router>
  ); 
}

function Home(){
   return (
      <div>
         <h1>Home</h1>
      </div>
   );
}

function Login() {
   return (
      <div>
         <h2>Login</h2>
      </div>
   );
}

export default App;

在這段程式碼裡面我們會用到一些新的東西
像是Router,Switch,Route,Link這四個 tag
首先
我們要用到 Router 的部分要使用Router tag 包覆
接著我們可以透過Link（連結）的方式來切換畫面上的元素
Link的to屬性會對應Route標籤的path屬性
並且呈現對應組件的網頁元素出來
to屬性可以接收路徑物件或路徑字串
而網頁元素呈現的位置則是直接就Switch標籤位置顯示
Switch標籤內存放的是對應的不同狀況
也就是多個Route標籤
React 可以透過上面的方式來把網頁元素做適當的切換

基本概念結束後
好奇如我突然想到
阿如果給他兩個然後各自有自己的對應組件
那這樣會不會獨立運作呢？
於是馬上開始進行實驗：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function App() {
      return (
         <Router>
            <div>
               <h2>Welcome to React Router Tutorial</h2>
               <h1>Link 1</h1>
               <ul>
                  <li><Link to={'/app1'}>Home1</Link></li>
                  <li><Link to={'/Login1'}>Login1</Link></li>
               </ul>
               <h1>Link 2</h1>
               <ul>
                  <li><Link to="app2">Home2</Link></li>
                  <li><Link to="Login2">Login2</Link></li>
               </ul>
               <hr />
               <p>block2:</p>
               <Switch>
                  <Route path="/app2" component={Home2} />
                  <Route exact path='/Login2' component={Login2} />
               </Switch>
               <h1>-----</h1>
               <p>block1:</p>
               <Switch>
                  <Route path="/app1" component={Home1} />
                  <Route exact path='/Login1' component={Login1} />
               </Switch>
            </div>
         </Router>
      );
}

function Home1(){
   return (
      <div>
         <h1>Home1</h1>
      </div>
   );
}

function Login1() {
   return (
      <div>
         <h1>Login1</h1>
      </div>
   );
}

function Home2(){
   return (
      <div>
         <h1>Home2</h1>
      </div>
   );
}

function Login2() {
   return (
      <div>
         <h1>Login2</h1>
      </div>
   );
}
export default App;

我在 html 加上一條線以及位置
藉以分辨是來自哪個連結
並且實驗是不是真的對應Switch標籤位置
實驗的結果如下：

這個實驗可以看到
確實產生位置是如同我所分隔的各自Switch標籤位置
然而我用了兩組互相連接各自不同的組件
但是終究一次只能有一個組件的畫面呈現出來
一個Router一次選擇一個元素
好的
那麼新問題誕生
那我能不能一次寫兩個Router咧？

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function App() {
      return (
         <div>
            <Router>
               <div>
                  <h2>Welcome to React Router1</h2>
                  <ul>
                     <li><Link to={'/app1'}>Home1</Link></li>
                     <li><Link to={'/Login1'}>Login1</Link></li>
                  </ul>
                  <hr/>
                  <Switch>
                     <Route path="/app1" component={Home1} />
                     <Route exact path='/Login1' component={Login1} />
                  </Switch>
               </div>
            </Router>
            <h1>-----</h1>
            <Router>
               <div>
                  <h2>Welcome to React Router2</h2>
                  <ul>
                     <li><Link to="app2">Home2</Link></li>
                     <li><Link to="Login2">Login2</Link></li>
                  </ul>
                  <hr />
                  <Switch>
                     <Route path="/app2" component={Home2} />
                     <Route exact path='/Login2' component={Login2} />
                  </Switch>
               </div>
            </Router>
         </div>
      );
}

function Home1(){
   return (
      <div>
         <h1>Home1</h1>
      </div>
   );
}

function Login1() {
   return (
      <div>
         <h1>Login1</h1>
      </div>
   );
}

function Home2(){
   return (
      <div>
         <h1>Home2</h1>
      </div>
   );
}

function Login2() {
   return (
      <div>
         <h1>Login2</h1>
      </div>
   );
}
export default App;

先看實驗結果：

從這段程式碼的結果來看
兩個Router是可以的
過程中我發現Router標籤數量不限
但是Router有個規則是他只能有一個子標籤
所以裡面的內容都要用一個標籤把他們裝起來
當有複數個Router的時候
前面切換的組件就能夠保持下來了

以上就是今天關於 Router 的學習筆記啦
其實路由這件事情有非常多的方法可以達成
JS也有很多函式庫都有各自的方法
如果想更進一步了解
可以去這裡逛逛
裡面有很多很有趣的寫法都值得試試看喔！

參考資料

1. tutorialspoint-ReactJS Tutorial
2. React 官方文件
3. React-Router

>>> 隊友任意門 <<<

• Eva Vue.js 30天隨身包
• Ben那些年，我們一起錯過的Javascript
• Ray激戰ReactJS 30天

Day20 end
by 瑞Ray (◔⊖◔)つ